<template>
  <el-select
    style="width: 100%"
    v-model="appId"
    filterable
    remote
    placeholder="请搜索您要选择的应用"
    :remote-method="remoteMethod"
    :loading="loading"
  >
  <!--     reserve-keyword -->
    <el-option
      class="option"
      v-for="(item, index) in options"
      :key="index"
      :label="item.appName"
      :value="item.id"
    >
    <div class="left">{{item.appName}}</div>
    <div class="right">所属部门：{{item.orgName}}</div>
    </el-option>
  </el-select>
</template>

<script>
import { ref, computed, watch, defineComponent, onMounted } from "vue";
import { getAppListByOrg } from "@/api/application";
export default defineComponent({
  name: "AppAutoSelect",
  emits: ["update:modelValue"],
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    query: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit, slots }) {
    const loading = ref(false);

    const appId = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val),
    });

    const options = ref([]);
    
    const remoteMethod = async (query) => {
      if (query) {
        loading.value = true;
        const res = await getAppListByOrg({ appName: query });
        loading.value = false;
        options.value = res.data;
      } else {
        options.value = [];
      }
    };
    onMounted(() => {
      remoteMethod(props.query)
    })
    return {
      appId,
      loading,
      options,
      remoteMethod,
    }
  },
});
</script>

<style scoped lang="scss">
.option.el-select-dropdown__item {
  padding: 5px 32px 10px 20px;
  height: auto;
  .right {
    line-height: 20px;
    font-size: 12px;
    color: #999;
  }
  &.selected {
    background-color: #f5f7fa;
    .right {
    color: #333;
  }
  }
}
.cascader-container {
  display: inline-block;
}
.el-cascader-panel {
  height: 300px;
}
.el-radio-group {
  width: 100%;
}
.self-dept-cascader {
  display: inline-block;
  // margin-right: 10px;
  position: relative;
  .el-input {
    width: 200px;
    cursor: pointer;
    :deep(.el-input__inner) {
      padding-right: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
    &.disabled {
      cursor: not-allowed;
      :deep(.el-input__inner) {
        color: #666;
        cursor: not-allowed;
      }
    }
  }
  .edit-svg {
    position: absolute;
    top: 9px;
    right: 10px;
    color: #ccc;
    width: 16px;
    height: 16px;
  }
}
</style>
